<template>
    <div class="supplier_view footer-page">
      <el-form ref="viewForm" :model="viewForm" :rules="rules" class="demo-ruleForm" :class="{ 'edit_form': isEdit }">
        <el-tabs v-model="activeName" @tab-click="handleTabClick">
          <el-tab-pane label="基本信息" name="base">
            <p class="edit-header">
              <span>基本信息</span>
            </p>
            <div class="info_list">
              <el-row :gutter="20">
                <!-- <el-col :span="12">
                  <div class="flex">
                    <label><span v-if="isEdit" class="required-icon">*</span>店铺头像:</label>
                    <div class="flex-1">
                      <preview-img v-if="!isEdit" :img-url="viewForm.photo" />
                      <el-form-item v-else prop="photo">
                        <crop-upload show-type="photo" :init-val="viewForm.photo" wrapper-width="95px" wrapper-height="95px" @setVal="(val) => setUrl('photo', val)" />
                      </el-form-item>
                    </div>
                  </div>
                </el-col> -->
                <el-col :span="12">
                  <div class="flex">
                    <label><span v-if="isEdit" class="required-icon">*</span>入驻时间:</label>
                    <div class="flex-1">
                      <!-- <preview-img v-if="!isEdit" :img-url="viewForm.photo" />
                      <el-form-item v-else prop="photo">
                        <crop-upload show-type="photo" :init-val="viewForm.photo" wrapper-width="95px" wrapper-height="95px" @setVal="(val) => setUrl('photo', val)" />
                      </el-form-item> -->
                      <p v-if="!isEdit">{{ viewForm.create_time }}</p>
                      <el-form-item v-else prop="create_time">
                        <el-input v-model="viewForm.create_time" clearable />
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="flex">
                    <label><span v-if="isEdit" class="required-icon">*</span>失效时间:</label>
                    <div class="flex-1">
                      <p v-if="!isEdit">{{ viewForm.end_time }}</p>
                      <el-form-item v-else prop="end_time">
                        <el-input v-model="viewForm.end_time" clearable />
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="flex">
                    <label><span v-if="isEdit" class="required-icon">*</span>姓名:</label>
                    <div class="flex-1">
                      <p v-if="!isEdit">{{ viewForm.faname }}</p>
                      <el-form-item v-else prop="faname">
                        <!-- <el-select v-model="viewForm.faname" clearable :disabled="viewForm.account == 1">
                          <el-option label="风控" :value="1" />
                          <el-option label="不风控" :value="2" />
                        </el-select> -->
                        <el-input v-model="viewForm.faname" clearable />
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="flex">
                    <label><span v-if="isEdit" class="required-icon">*</span>身份证号码:</label>
                    <div class="flex-1">
                      <p v-if="!isEdit">{{ viewForm.idcard }}</p>
                      <el-form-item v-else prop="idcard">
                        <el-input v-model="viewForm.idcard" clearable />
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <!-- <el-col :span="12">
                  <div class="flex">
                    <label><span v-if="isEdit" class="required-icon">*</span>当前经营位置:</label>
                    <div class="flex-1">
                      <p v-if="!isEdit">{{ shopcity }}</p>
                      <el-form-item v-else prop="shopcity">
                        <el-cascader v-model="viewForm.shopcity" clearable filterable placeholder="请选择当前经营位置" :options="regionList" :props="optionProps" separator="-" />
                      </el-form-item>
                    </div>
                  </div>
                </el-col> -->
                <el-col :span="12">
                  <div class="flex">
                    <label><span v-if="isEdit" class="required-icon">*</span>联系人姓名:</label>
                    <div class="flex-1">
                      <p v-if="!isEdit">{{ viewForm.faname }}</p>
                      <el-form-item v-else prop="faname">
                        <!-- <el-cascader v-model="viewForm.faname" clearable filterable placeholder="请选择当前经营位置" :options="regionList" :props="optionProps" separator="-" /> -->
                        <el-input v-model="viewForm.faname" clearable />
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="flex">
                    <label><span v-if="isEdit" class="required-icon">*</span>联系人手机号:</label>
                    <div class="flex-1">
                      <p v-if="!isEdit">{{ viewForm.contact_tel }}</p>
                      <el-form-item v-else prop="contact_tel">
                        <el-input v-model="viewForm.contact_tel" clearable />
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="flex">
                    <label><span v-if="isEdit" class="required-icon">*</span>推广模式:</label>
                    <div class="flex-1">
                      <p v-if="!isEdit">{{ viewForm.contact_tel }}</p>
                      <el-form-item v-else prop="contact_tel">
                        <el-input v-model="viewForm.contact_tel" clearable />
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="flex">
                    <label><span v-if="isEdit" class="required-icon">*</span>推广类型:</label>
                    <div class="flex-1">
                      <p v-if="!isEdit">{{ viewForm.user_type==1?'企业':'个人' }}</p>
                      <el-form-item v-else prop="user_type">
                        <!-- <el-input v-model="viewForm.user_type" clearable /> -->
                        <el-select v-model="viewForm.user_type" clearable disabled="true">
                          <el-option label="企业" :value="1" />
                          <el-option label="个人" :value="2" />
                        </el-select>
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="flex">
                    <label><span v-if="isEdit" class="required-icon">*</span>推广区域:</label>
                    <div class="flex-1">
                      <p v-if="!isEdit">{{ shopcity }}</p>
                      <el-form-item v-else prop="shopcity">
                        <!-- <el-input v-model="viewForm.shopcity" clearable /> -->
                        <el-cascader v-model="viewForm.shopcity" clearable filterable placeholder="请选择公司推广区域" :options="areaList" :props="optionProps" separator="-" />
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
                <!-- <el-col :span="12">
                  <div class="flex">
                    <label><span v-if="isEdit" class="required-icon">*</span>推广类型:</label>
                    <div class="flex-1">
                      <p v-if="!isEdit">{{ viewForm.user_type==1?'企业':'个人' }}</p>
                      <el-form-item v-else prop="user_type">
                        <el-select v-model="viewForm.user_type" clearable>
                          <el-option label="企业" :value="1" />
                          <el-option label="个人" :value="2" />
                        </el-select>
                      </el-form-item>
                    </div>
                  </div>
                </el-col> -->
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="flex">
                    <label><span v-if="isEdit" class="required-icon">*</span>结算类型:</label>
                    <div class="flex-1">
                      <p v-if="!isEdit">{{ viewForm.rate_type_name }}</p>
                      <el-form-item v-else prop="rate_type_name">
                        <el-select v-model="viewForm.rate_type_name" clearable @change="contractTypeChange">
                          <el-option label="租金比例结算" :value="1" />
                          <el-option label="官网价比例结算" :value="2" />
                          <el-option label="固定金额结算" :value="3" />
                          <el-option label="租金比例+固定金额结算" :value="4" />
                          <el-option label="官网价+固定金额例结算" :value="5" />
                        </el-select>
                        <!-- <el-input v-model="viewForm.rate_type_name" clearable /> -->
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="flex">
                    <label><span v-if="isEdit" class="required-icon">*</span>固定结算金额:</label>
                    <div class="flex-1">
                      <p v-if="!isEdit">{{ viewForm.rate_money }}</p>
                      <el-form-item v-else prop="rate_money">
                        <el-input v-model="viewForm.rate_money" clearable />
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="flex">
                    <label>支付宝账号:</label>
                    <div class="flex-1">
                      <p v-if="!isEdit">{{ viewForm.alipayaccount }}</p>
                      <el-form-item v-else prop="alipayaccount">
                        <!-- <el-select v-model="viewForm.is_city_location" clearable>
                          <el-option label="开启" :value="1" />
                          <el-option label="关闭" :value="2" />
                        </el-select> -->
                        <el-input v-model="viewForm.alipayaccount" clearable />
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="flex">
                    <label><span v-if="isEdit" class="required-icon">*</span>账户余额:</label>
                    <div class="flex-1">
                      <p v-if="!isEdit">{{ viewForm.balance }}</p>
                      <el-form-item v-else prop="balance">
                        <el-input v-model="viewForm.balance" clearable />
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="flex">
                    <label>分成率:</label>
                    <div class="flex-1">
                      <p v-if="!isEdit">{{ viewForm.rate + '%' }}</p>
                      <el-form-item v-else prop="rate">
                        <el-input v-model="viewForm.rate" clearable />
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="flex">
                    <label>推广级别:</label>
                    <div class="flex-1">
                      <p v-if="!isEdit">{{ viewForm.level==1?'线上':'线下' }}</p>
                      <el-form-item v-else prop="level">
                        <!-- <el-input v-model="viewForm.level" clearable /> -->
                        <el-select v-model="viewForm.level" clearable>
                          <el-option label="线上" :value="1" />
                          <el-option label="线下" :value="2" />
                        </el-select>
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
                
                <el-col :span="12" />
              </el-row>
              <el-row :gutter="20">
              <el-col :span="12">
                  <div class="flex">
                    <label><span v-if="isEdit" class="required-icon">*</span>身份证正面照:</label>
                    <div class="flex-1">
                      <preview-img v-if="!isEdit" :img-url="viewForm.faidcard" />
                      <el-form-item v-else prop="faidcard">
                        <crop-upload show-type="photo" :init-val="viewForm.faidcard" wrapper-width="95px" wrapper-height="95px" @setVal="(val) => setUrl('faidcard', val)" />
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="flex">
                    <label><span v-if="isEdit" class="required-icon">*</span>身份证背面照:</label>
                    <div class="flex-1">
                      <preview-img v-if="!isEdit" :img-url="viewForm.faidcard_back" />
                      <el-form-item v-else prop="faidcard_back">
                        <crop-upload show-type="photo" :init-val="viewForm.faidcard_back" wrapper-width="95px" wrapper-height="95px" @setVal="(val) => setUrl('faidcard_back', val)" />
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
            </el-row>
                <!-- <el-row :gutter="20">
                <el-col
                  v-if="isEdit"
                  :span="24"
                >
                  <div class="flex">
                    <label><span class="required-icon">*</span>是否开启城市定位:</label>
                    <div class="flex-1">
                      <el-form-item prop="is_city_location">
                        <el-select
                          clearable
                          v-model="viewForm.is_city_location"
                        >
                          <el-option
                            label="开启"
                            :value="1"
                          ></el-option>
                          <el-option
                            label="关闭"
                            :value="2"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
              </el-row> -->
            </div>
            <p class="edit-header" v-if="viewForm.user_type==1?true:false">
              <span>公司信息</span>
            </p>
            <div class="info_list" v-if="viewForm.user_type==1?true:false">
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="flex">
                    <label><span v-if="isEdit" class="required-icon">*</span>公司名称:</label>
                    <div class="flex-1">
                      <p v-if="!isEdit">{{ viewForm.mechanism }}</p>
                      <el-form-item v-else prop="mechanism">
                        <el-input v-model="viewForm.mechanism" clearable />
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="flex">
                    <label><span v-if="isEdit" class="required-icon">*</span>统一社会信用代码:</label>
                    <div class="flex-1">
                      <p v-if="!isEdit">{{ viewForm.companyid }}</p>
                      <el-form-item v-else prop="companyid">
                        <el-input v-model="viewForm.companyid" clearable />
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="flex area_item">
                    <label><span v-if="isEdit" class="required-icon">*</span>公司所在区域:</label>
                    <div class="flex-1">
                      <p v-if="!isEdit">{{ companyArea }}</p>
                      <el-form-item v-else prop="company_area">
                        <el-cascader v-model="viewForm.company_area" clearable filterable placeholder="请选择公司所在区域" :options="areaList" :props="optionProps" separator="-" />
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="flex">
                    <label><span v-if="isEdit" class="required-icon">*</span>公司地址:</label>
                    <div class="flex-1">
                      <p v-if="!isEdit">{{ viewForm.address }}</p>
                      <el-form-item v-else prop="address">
                        <el-input v-model="viewForm.address" clearable />
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="flex">
                    <label><span v-if="isEdit" class="required-icon">*</span>法人姓名:</label>
                    <div class="flex-1">
                      <p v-if="!isEdit">{{ viewForm.faname }}</p>
                      <el-form-item v-else prop="faname">
                        <el-input v-model="viewForm.faname" :maxlength="10" clearable />
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="flex">
                    <label><span v-if="isEdit" class="required-icon">*</span>法人身份证号:</label>
                    <div class="flex-1">
                      <p v-if="!isEdit">{{ viewForm.idcard }}</p>
                      <el-form-item v-else prop="idcard">
                        <el-input v-model="viewForm.idcard" clearable />
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="flex">
                    <label><span v-if="isEdit" class="required-icon">*</span>营业执照:</label>
                    <div class="flex-1">
                      <preview-img v-if="!isEdit" :img-url="viewForm.shopcard" />
                      <el-form-item v-else prop="shopcard">
                        <crop-upload show-type="photo" :init-val="viewForm.shopcard" wrapper-width="95px" wrapper-height="95px" @setVal="(val) => setUrl('shopcard', val)" />
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <!-- <div class="flex">
                    <label><span v-if="isEdit" class="required-icon">*</span>公司门头照:</label>
                    <div class="flex-1">
                      <preview-img v-if="!isEdit" :img-url="viewForm.doorphoto" />
                      <el-form-item v-else prop="doorphoto">
                        <crop-upload show-type="photo" :init-val="viewForm.doorphoto" wrapper-width="95px" wrapper-height="95px" @setVal="(val) => setUrl('doorphoto', val)" />
                      </el-form-item>
                    </div>
                  </div> -->
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <!-- <el-col :span="12">
                  <div class="flex">
                    <label><span v-if="isEdit" class="required-icon">*</span>公章图片:</label>
                    <div class="flex-1">
                      <preview-img v-if="!isEdit" :img-url="viewForm.seal_url" />
                      <el-form-item v-else prop="seal_url">
                        <crop-upload show-type="photo" :init-val="viewForm.seal_url" wrapper-width="95px" wrapper-height="95px" @setVal="(val) => setUrl('seal_url', val)" />
                      </el-form-item>
                    </div>
                  </div>
                </el-col> -->
              </el-row>
              <el-row :gutter="20">
                
                
                <el-col :span="12" />
              </el-row>
            </div>
            <!-- <template v-if="!isEdit">
              <p class="edit-header">
                <span>操作记录</span>
              </p>
              <div class="info_list">
                <el-table :data="tableData">
                  <el-table-column prop="operation_content" label="内容" />
                  <el-table-column prop="operator" label="操作人" width="180" />
                  <el-table-column prop="operation_time" label="操作时间" width="200" />
                </el-table>
              </div>
            </template> -->
          </el-tab-pane>
          <!-- <el-tab-pane label="提现信息" name="withdraw">
            <p class="edit-header">
              <span>支付宝信息</span>
            </p>
            <div class="info_list">
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="flex">
                    <label>支付宝姓名:</label>
                    <div class="flex-1">
                      <p v-if="!isEdit">{{ viewForm.payeename }}</p>
                      <el-form-item v-else prop="payeename">
                        <el-input v-model="viewForm.payeename" clearable />
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="flex">
                    <label>支付宝账号:</label>
                    <div class="flex-1">
                      <p v-if="!isEdit">{{ viewForm.alipayaccount }}</p>
                      <el-form-item v-else prop="alipayaccount">
                        <el-input v-model="viewForm.alipayaccount" clearable />
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
          <el-tab-pane label="增值服务信息" name="service">
            <p class="edit-header">
              <span>短信增值服务信息</span>
            </p>
            <div class="info_list">
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="flex">
                    <label><span v-if="isEdit" class="required-icon">*</span>短信剩余数量:</label>
                    <div class="flex-1">
                      <p v-if="!isEdit">{{ viewForm.sms_num }}</p>
                      <el-form-item v-else prop="sms_num">
                        <el-input v-model="viewForm.sms_num" clearable />
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12" />
              </el-row>
            </div>
            <p class="edit-header">
              <span>布尔数据信息</span>
            </p>
            <div class="info_list">
              <el-row :gutter="20">
                <el-col :span="24">
                  <div class="flex">
                    <label>是否开启布尔数据:</label>
                    <div class="flex-1">
                      <p v-if="!isEdit">{{ viewForm.risk_credit_status_boolea == 1 ? '开启' : '关闭' }}</p>
                      <el-form-item v-else class="guarantee_item" style="margin-bottom:0">
                        <el-select v-model="viewForm.risk_credit_status_boolea" style="width:100px;margin-bottom:10px" clearable>
                          <el-option label="开启" :value="1" />
                          <el-option label="关闭" :value="2" />
                        </el-select>
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="flex">
                    <label><span v-if="isEdit" class="required-icon">*</span>布尔数据余量:</label>
                    <div class="flex-1">
                      <p v-if="!isEdit">{{ viewForm.risk_credit_amount_boolea }}</p>
                      <el-form-item v-else prop="risk_credit_amount_boolea">
                        <el-input v-model="viewForm.risk_credit_amount_boolea" clearable />
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12" />
              </el-row>
            </div>
            <p class="edit-header">
              <span>百融风控信息</span>
            </p>
            <div class="info_list">
              <el-row :gutter="20">
                <el-col :span="24">
                  <div class="flex">
                    <label>是否开启百融风控:</label>
                    <div class="flex-1">
                      <p v-if="!isEdit">{{ viewForm.risk_credit_status == 1 ? '开启' : '关闭' }}</p>
                      <el-form-item v-else class="guarantee_item" style="margin-bottom:0">
                        <el-select v-model="viewForm.risk_credit_status" style="width:100px;margin-bottom:10px" clearable>
                          <el-option label="开启" :value="1" />
                          <el-option label="关闭" :value="2" />
                        </el-select>
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="flex">
                    <label><span v-if="isEdit" class="required-icon">*</span>百融风控余量:</label>
                    <div class="flex-1">
                      <p v-if="!isEdit">{{ viewForm.risk_credit_amount }}</p>
                      <el-form-item v-else prop="risk_credit_amount">
                        <el-input v-model="viewForm.risk_credit_amount" clearable />
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12" />
              </el-row>
            </div>
            <p class="edit-header">
              <span>征信风控信息</span>
            </p>
            <div class="info_list">
              <el-row :gutter="20">
                <el-col :span="24">
                  <div class="flex">
                    <label>是否开启征信风控:</label>
                    <div class="flex-1">
                      <p v-if="!isEdit">{{ viewForm.risk_credit_status_credit == 1 ? '开启' : '关闭' }}</p>
                      <el-form-item v-else class="guarantee_item" style="margin-bottom:0">
                        <el-select v-model="viewForm.risk_credit_status_credit" style="width:100px;margin-bottom:10px" clearable>
                          <el-option label="开启" :value="1" />
                          <el-option label="关闭" :value="2" />
                        </el-select>
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="flex">
                    <label><span v-if="isEdit" class="required-icon">*</span>征信风控余量:</label>
                    <div class="flex-1">
                      <p v-if="!isEdit">{{ viewForm.risk_credit_amount_credit }}</p>
                      <el-form-item v-else prop="risk_credit_amount_credit">
                        <el-input v-model="viewForm.risk_credit_amount_credit" clearable />
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12" />
              </el-row>
            </div>
            <p class="edit-header">
              <span>雷达风控信息</span>
            </p>
            <div class="info_list">
              <el-row :gutter="20">
                <el-col :span="24">
                  <div class="flex">
                    <label>是否开启雷达风控:</label>
                    <div class="flex-1">
                      <p v-if="!isEdit">{{ viewForm.risk_radar_status_credit == 1 ? '开启' : '关闭' }}</p>
                      <el-form-item v-else class="guarantee_item" style="margin-bottom:0">
                        <el-select v-model="viewForm.risk_radar_status_credit" style="width:100px;margin-bottom:10px" clearable>
                          <el-option label="开启" :value="1" />
                          <el-option label="关闭" :value="2" />
                        </el-select>
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="flex">
                    <label><span v-if="isEdit" class="required-icon">*</span>雷达风控余量:</label>
                    <div class="flex-1">
                      <p v-if="!isEdit">{{ viewForm.risk_radar_amount_credit }}</p>
                      <el-form-item v-else prop="risk_radar_amount_credit">
                        <el-input v-model="viewForm.risk_radar_amount_credit" clearable />
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12" />
              </el-row>
            </div>
            <p class="edit-header">
              <span>学历风控信息</span>
            </p>
            <div class="info_list">
              <el-row :gutter="20">
                <el-col :span="24">
                  <div class="flex">
                    <label>是否开启学历风控:</label>
                    <div class="flex-1">
                      <p v-if="!isEdit">{{ viewForm.risk_edu_status_credit == 1 ? '开启' : '关闭' }}</p>
                      <el-form-item v-else class="guarantee_item" style="margin-bottom:0">
                        <el-select v-model="viewForm.risk_edu_status_credit" style="width:100px;margin-bottom:10px" clearable>
                          <el-option label="开启" :value="1" />
                          <el-option label="关闭" :value="2" />
                        </el-select>
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="flex">
                    <label><span v-if="isEdit" class="required-icon">*</span>学历风控余量:</label>
                    <div class="flex-1">
                      <p v-if="!isEdit">{{ viewForm.risk_edu_amount_credit }}</p>
                      <el-form-item v-else prop="risk_edu_amount_credit">
                        <el-input v-model="viewForm.risk_edu_amount_credit" clearable />
                      </el-form-item>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12" />
              </el-row>
            </div>
          </el-tab-pane> -->
        </el-tabs>
      </el-form>
      <div class="page-footer-btns">
        <template v-if="!isEdit">
          <el-button size="small" @click="$router.back()">返回</el-button>
          <el-button size="small" type="primary" @click="isEdit = true">修改信息</el-button>
        </template>
        <template v-else>
          <el-button size="small" @click="cancelEdit">返回</el-button>
          <el-button size="small" type="primary" @click="submit">保存</el-button>
        </template>
      </div>
    </div>
  </template>
  
  <script>
  import previewImg from '@/components/previewImg'
  import { getSupplierInfo, editSupplier, saleApplyDetail,saleUserEdit } from '@/api/user'
  import cropUpload from '@/components/cropUpload'
  import { checkPhone, checkCompanyId, checkCardId, checkMobile, checkEmail } from '@/utils/validate'
  import { getRegion } from '@/api/order'
  export default {
    components: { previewImg, cropUpload },
    // props: ['viewId', 'toEdit'],
    props: {
      viewId: {
        type: String,
        default: ''
      },
      toEdit: {
        type: String,
        default: ''
      }
    },
    data() {
      const validateMobile = (rule, value, callback) => {
        if (!checkPhone(value) && !checkMobile(value)) {
          callback(new Error('客服电话格式错误'))
        } else {
          callback()
        }
      }
      const validateTel = (rule, value, callback) => {
        if (!checkMobile(value)) {
          callback(new Error('联系人手机号格式错误'))
        } else {
          callback()
        }
      }
      const validateCompanyId = (rule, value, callback) => {
        if (!checkCompanyId(value)) {
          callback(new Error('工商注册号格式错误'))
        } else {
          callback()
        }
      }
      const validateIdcard = (rule, value, callback) => {
        if (!checkCardId(value)) {
          callback(new Error('法人身份证号格式错误'))
        } else {
          callback()
        }
      }
      // const validateName = (rule, value, callback) => {
      //   if (value && !checkName(value)) {
      //     callback(new Error('支付宝姓名格式错误'))
      //   } else {
      //     callback()
      //   }
      // }
      // const validateAccount = (rule, value, callback) => {
      //   if (value && !checkAlipayAccount(value)) {
      //     callback(new Error('支付宝账号格式错误'))
      //   } else {
      //     callback()
      //   }
      // }
      const validateCount = (rule, value, callback) => {
        if (/^(\-|\+)?\d+(\.\d+)?$/.test(value)) {
          callback()
        } else {
          callback(new Error('数量输入错误'))
        }
      }
      const validateEmail = (rule, value, callback) => {
        if (value && !checkEmail(value)) {
          callback(new Error('店铺邮箱格式错误'))
        } else {
          callback()
        }
      }
      return {
        activeName: 'base',
        isEdit: false,
        tableData: [],
        viewForm: {},
        rules: {
          shopname: [
            { required: true, message: '店铺名称不能为空', trigger: 'blur' }
          ],
          account: [
            { required: true, message: '请选择账户类型', trigger: 'change' }
          ],
          account_type: [
            { required: true, message: '请选择是否开启风控', trigger: 'change' }
          ],
          faptype: [
            { required: true, message: '请选择发票类型', trigger: 'change' }
          ],
          shopcity: [
            { required: true, message: '当前经营位置不能为空', trigger: 'change' }
          ],
          people: [
            { required: true, message: '店铺联系人不能为空', trigger: 'blur' }
          ],
          mobile: [
            { required: true, message: '客服电话不能为空', trigger: 'blur' },
            { validator: validateMobile, trigger: 'blur' }
          ],
          contact_tel: [
            { required: true, message: '联系人手机号不能为空', trigger: 'blur' },
            { validator: validateTel, trigger: 'blur' }
          ],
          contract_type: [
            { required: true, message: '请签署合同类型', trigger: 'change' }
          ],
          sign_num: [
            { required: true, message: '请选择签署方式', trigger: 'change' }
          ],
          mechanism: [
            { required: true, message: '公司名称不能为空', trigger: 'blur' }
          ],
          email: [
            { required: true, message: '店铺邮箱不能为空', trigger: 'blur' },
            { validator: validateEmail, trigger: 'blur' }
          ],
          companyid: [
            { required: true, message: '工商注册号不能为空', trigger: 'blur' },
            { validator: validateCompanyId, trigger: 'blur' }
          ],
          company_area: [
            { required: true, message: '请选择公司所在区域', trigger: 'change' }
          ],
          company: [
            { required: true, message: '公司地址不能为空', trigger: 'blur' }
          ],
          faname: [
            { required: true, message: '法人姓名不能为空', trigger: 'blur' }
          ],
          idcard: [
            { required: true, message: '法人身份证号不能为空', trigger: 'blur' },
            { validator: validateIdcard, trigger: 'blur' }
          ],
          shopcard: [
            { required: true, message: '请上传营业执照', trigger: 'change' }
          ],
          photo: [
            { required: true, message: '请上传店铺头像', trigger: 'change' }
          ],
          doorphoto: [
            { required: true, message: '请上传公司门头照', trigger: 'change' }
          ],
          seal_url: [
            { required: true, message: '请上传公章图片', trigger: 'change' }
          ],
          faidcard: [
            { required: true, message: '请上传身份证正面照', trigger: 'change' }
          ],
          faidcard_back: [
            { required: true, message: '请上传身份证背面照', trigger: 'change' }
          ],
          is_city_location: [
            { required: true, message: '请选择是否开启城市定位', trigger: 'change' }
          ],
          // payeename: [
          //   // { required: true, message: '支付宝姓名不能为空', trigger: 'blur' },
          //   { validator: validateName, trigger: 'blur' }
          // ],
          alipayaccount: [
            { required: true, message: '支付宝账号不能为空', trigger: 'blur' }
            // { validator: validateAccount, trigger: 'blur' }
          ],
          sms_num: [
            { required: true, message: '短信剩余数量不能为空', trigger: 'blur' },
            { validator: validateCount, trigger: 'blur' }
          ],
          risk_credit_amount: [
            { required: true, message: '风控余量不能为空', trigger: 'blur' },
            { validator: validateCount, trigger: 'blur' }
          ]
          // risk_credit_investigation: [
          //   { required: true, message: '风控余量不能为空', trigger: 'blur' },
          //   { validator: validateCount, trigger: 'blur' }
          // ]
        },
        optionProps: {
          value: 'name',
          label: 'name',
          expandTrigger: 'hover',
          children: 'sub'
        },
        regionList: [],
        areaList: [],
        shopcity: '',
        companyArea: ''
      }
    },
    mounted() {
      this.getData()
      this.getProvice()
    },
    methods: {
      getAreaId(arr) {
        for (const p of this.areaList) {
          if (p.name === arr[0]) {
            for (const c of p.sub) {
              if (c.name === arr[1]) {
                return c.id
              }
            }
          }
        }
        return ''
      },
      contractTypeChange(val) {
        // console.log(val);
        this.viewForm.rate_type_name=val
      },
      accountTypeChange(val) {
        if (val === 1) {
          this.viewForm.account_type = 1
        }
      },
      setUrl(key, value) {
        this.viewForm[key] = value
      },
      handleTabClick(tab, event) {
        // this.cancelEdit();
      },
      // 取消更改
      cancelEdit() {
        if (this.toEdit) {
          this.$router.back()
        } else {
          this.isEdit = false
          this.getData()
        }
      },
      // 保存提交
      submit() {
        this.$refs['viewForm'].validate((valid) => {
          if (valid) {
            const params = {
              photo: '',
              shopname: '',
              account: null,
              account_type: null,
              address:'',
              faptype: '',
              shopcity: '',
              people: '',
              mobile: '',
              email: '',
              contact_tel: '',
              contract_type: null,
              sign_num: null,
              mechanism: '',
              companyid: '',
              rate_type:'',
              company_area: '',
              area_id: '',
              company: '',
              faname: '',
              idcard: '',
              shopcard: '',
              doorphoto: '',
              seal_url: '',
              faidcard: '',
              faidcard_back: '',
              is_city_location: 2,
              payeename: '',
              alipayaccount: '',
              sms_num: 0,
              shop_rate: '',
              company_address:'',
              sale_user_id:''
            }
            for (const key in params) {
              params[key] = this.viewForm[key]
            }
            console.log("params",params);
            params.sale_user_id = this.viewId
            
            // params.area_id = this.getAreaId(params.company_area)
            // params.company_area = params.company_area.join('-') 
            params.shopcity = params.shopcity.join('-') 
            console.log("params3",params);
           
            saleUserEdit(params).then(res => {
              this.isEdit = false
              this.getData()
            })
          } else {
            this.$message({
              message: '表单信息不完整或有错误，请检查完整表单',
              type: 'error'
            })
            return false
          }
        })
      },
      getData() {
        saleApplyDetail(this.viewId).then(res => {
            
          console.log(res);
          this.viewForm = { ...res.shopInfo, ...res.companyInfo, ...res.withdrawInfo, ...res.incrementInfo, ...res.functionSetInfo }
          this.tableData = res
          this.viewForm=this.tableData
          this.shopcity = this.viewForm.shopcity
          const cityArr = this.viewForm.shopcity.split('-')
          this.viewForm.shopcity = cityArr
          this.companyArea = this.viewForm.company_area
          const areaArr = this.viewForm.company_area.split('-')
          this.viewForm.company_area = areaArr
          if (this.toEdit) {
            this.isEdit = true
            this.$route.meta.title = '编辑申请审批资料'
          } else {
            this.$route.meta.title = '查看申请审批资料'
          }
        })
      },
      getProvice() {
        getRegion().then(res => {
          this.regionList = res ? res[0].sub : []
          this.areaList = res ? [...res[0].sub] : []
          const index = this.areaList.findIndex(k => k.id === 7459)
          this.areaList.splice(index, 1)
        })
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .supplier_view {
    .info_list {
      padding: 20px 0;
    }
  
    .el-image {
      width: 95px;
      height: 95px;
    }
  
    .el-row {
      margin-bottom: 20px;
    }
  
    label {
      width: 200px;
      margin-right: 10px;
    }
  }
  
  .item_inline_form {
    display: inline-block;
    margin-left: 20px;
    border: 1px solid #e6e6e6;
    border-radius: 3px;
    margin-bottom: 10px;
  
    &>span {
      display: inline-block;
      height: 100%;
      background-color: $gray-bg;
      padding: 0 10px;
      border-right: 1px solid #e6e6e6;
    }
  
    /deep/.el-input__inner {
      border: none;
    }
  }
  
  .tip {
    color: #bbbbbb;
    padding-left: 210px;
  }
  
  .edit_form label {
    padding-top: 12px;
  }
  
  .required-icon {
    margin-right: 2px;
  }
  </style>
  <style lang="scss">
  .guarantee_item,
  .area_item {
    .el-select .el-input {
      width: 100%;
    }
  }
  
  .area_item .el-form-item {
    margin-bottom: 10px;
  }
  </style>
  